<style type="text/css">

    .showwords
    {
        font-size: 30px;
        color: white;
        letter-spacing: 6px;
        position: absolute;
        font-weight: bold;
        z-index: 1;
        top: 93%;
        margin: -39px;
        left: 39px;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-shadow: 3px 3px 10px black, -3px -3px 10px black, -3px 3px 10px black, 3px -3px 10px black;
        /*background-color: rgba(255, 255, 255, 0.69);*/
    }

    *
    {
        padding: 0px;
        margin: 0px;
        -webkit-box-sizing: border-box;
    }

    body
    {
        /*background-color: black;*/
    }

    #container
    {
        width: 500px;
        height: 100%;
        position: absolute;
        overflow: hidden;
    }
    #container > div,#container > img
    {
        position: absolute;
    }

    #line1
    {
        left: 255px;
        top: 46px;
        height: 300px;
        width: 5px;
        -webkit-transform-origin: 50% 100%;
    }
    #line2
    {
        left: 255px;
        top: 346px;
        width: 5px;
        height: 300px;
        -webkit-transform-origin: 50% 0%;
    }
    #yuan
    {
        left: 104px;
        top: 179px;
        -webkit-transform: scale(0);
    }
    #yuan1
    {
        left: 143px;
        top: 270px;
        opacity: 0;
    }
    #line3
    {
        width: 230px;
        height: 5px;
        background-color: #D3BFAE;
        left: 19px;
        top: 327px;
        -webkit-transform-origin: 100% 50%;
        -webkit-transform: scale(0,1);
    }
    #line4
    {
        width: 221px;
        height: 5px;
        background-color: #D3BFAE;
        left: 261px;
        top: 327px;
        -webkit-transform-origin: 0% 50%;
        -webkit-transform: scale(0,1);
    }

    #yun
    {
        left: 97px;
        top: 51px;
        width: 55px;
        position: absolute;
        -webkit-animation: yunduo 1.4s linear infinite;
    }
    #yun1
    {
        left: 97px;
        top: 51px;
        width: 55px;
        position: absolute;
        -webkit-animation: yunduo 1.4s 0.7s linear infinite backwards;
    }
    #div1h,#div4h
    {
        width: 550px;
        height: 400px;
        /*background-color: #000;*/
        left: 22px;
        top: 165px;
        overflow: hidden;
        opacity: 0;
        /*display: none;*/
    }
    #div1v,#div4v
    {
        width: 490px;
        height: 750px;
        background-color: #000;
        left: 21px;
        top: 0px;
        overflow: hidden;
        opacity: 0;
    }
    #div2v
    {
        width: 500px;
        height: 780px;
        overflow: hidden;
        left: 0px;
        top:0px;
        opacity: 0;
    }
    #div2h
    {
        width: 500px;
        height: 350px;
        overflow: hidden;
        left: 0px;
        top: 180px;
        opacity: 0;
    }
    #word2
    {
        left: 25px;
        top: 553px;
        opacity: 0;
    }
    #feijidiv
    {
        left: 297px;
        top: 3px;
        width: 200px;
        height: 200px;
    }
    #yun2
    {
        left: 31px;
        top: 40px;
        width: 50px;
        position: absolute;
        opacity: 0;
    }
    #yun3
    {
        left: 110px;
        top: 49px;
        width: 60px;
        position: absolute;
        opacity: 0;
    }
    #feiji
    {
        left: 59px;
        top: 39px;
        position: absolute;
        width: 100px;
        opacity: 0;
    }
    #yun4
    {
        left: 48px;
        top: 81px;
        width: 85px;
        position: absolute;
        opacity: 0;
    }
    #div3v
    {
        width: 500px;
        height: 780px;
        overflow: hidden;
        opacity: 0;
    }
    #div3h
    {
        width: 500px;
        height: 350px;
        overflow: hidden;
        top: 190px;
        opacity: 0;
    }
    #word3
    {
        left: 28px;
        top: 33px;
        opacity: 0;
    }
    #jiaozi
    {
        left: 328px;
        top: 571px;
        opacity: 0;
    }
    #word4
    {
        left: 339px;
        top: 31px;
        opacity: 0;
    }
    #zixingche
    {
        left: 51px;
        top: 592px;
        opacity: 0;
    }
    #lupai
    {
        left: 35px;
        top: 565px;
        -webkit-transform-origin: 20% 90%;
        opacity: 0;
    }
    #aixin1
    {
        -webkit-transform: translate(-10px,76px) rotate(32deg) scale(0.8);
        width: 146px;
        height: 50px;
        opacity: 0;
    }
    #aixin2
    {
        -webkit-transform: translate(60px,51px) rotate(-21deg) scale(.7);
        width: 146px;
        height: 53px;
        opacity: 0;
    }
    #div5v
    {
        width: 530px;
        height: 800px;
        overflow: hidden;
        opacity: 0;
    }
    #div5h
    {
        width: 530px;
        height: 353px;
        overflow: hidden;
        top: 175px;
        opacity: 0;
    }
    #feijixian
    {
        left: 98px;
        top: 79px;
        width: 102px;
        opacity: 0;
        position: absolute;
    }
    #word1,#word2,#word3,#word4,#word5
    {
        display: none;
    }
</style>
<style type="text/css">
    @-webkit-keyframes line1_in
    {
        0%  {-webkit-transform: translate(0px,-325px) scale(1,1);opacity: 1}
        65% {-webkit-transform: translate(0px,0px) scale(1,1);opacity: 1}
        99% {-webkit-transform: translate(0px,0px) scale(1,.5);opacity: 1}
        100%{-webkit-transform: translate(0px,0px) scale(1,.5);opacity: 0;}
    }
    @-webkit-keyframes line2_in
    {
        0%  {-webkit-transform: translate(0px,345px) scale(1,1);opacity: 1}
        65% {-webkit-transform: translate(0px,0px) scale(1,1);opacity: 1}
        99% {-webkit-transform: translate(0px,0px) scale(1,.4);opacity: 1}
        100%{-webkit-transform: translate(0px,0px) scale(1,.4);opacity: 0}
    }
    @-webkit-keyframes yuan_in
    {
        0%    {-webkit-transform: scale(0);}
        60%   {-webkit-transform: scale(1.1);}
        80%   {-webkit-transform: scale(0.95);}
        100%  {-webkit-transform: scale(1);}
    }

    @-webkit-keyframes fadein
    {
        from  {opacity: 0}
        to    {opacity: 1}
    }
    @-webkit-keyframes fadeout
    {
        from  {opacity: 1}
        to    {opacity: 0}
    }
    @-webkit-keyframes title_out
    {
        from  {-webkit-transform: scale(1,1);opacity: 1}
        to    {-webkit-transform: scale(0.7,0.7);opacity: 0}
    }
    @-webkit-keyframes yuan_out
    {
        0%    {-webkit-transform: scale(1);opacity: 1}
        50%   {-webkit-transform: scale(0.05);opacity: 1}
        100%  {-webkit-transform: scale(0.05);opacity: 0}
    }
    @-webkit-keyframes yuan1_out
    {
        0%   {-webkit-transform: scale(1);opacity: 1}
        20%  {-webkit-transform: scale(1.1);opacity: 0.8}
        100% {-webkit-transform: scale(0.5);opacity: 0}
    }
    @-webkit-keyframes line3_out
    {
        0%  {-webkit-transform: scale(0,1);}
        50% {-webkit-transform: scale(1,1);}
        100%{-webkit-transform: translate(-250px,0px) scale(1,1);}
    }
    @-webkit-keyframes line4_out
    {
        0%  {-webkit-transform: scale(0,1);}
        50% {-webkit-transform: scale(1,1);}
        100%{-webkit-transform: translate(250px,0px) scale(1,1);}
    }
    @-webkit-keyframes yunduo
    {
        0%  {-webkit-transform: translate(-50px,34px) scale(.4);opacity: 0}
        10% {-webkit-transform: translate(-50px,34px) scale(.4);opacity: 1}
        100%{-webkit-transform: translate(10px,-10px) scale(1);opacity: 0}
    }
    @-webkit-keyframes huoche
    {
        from  {-webkit-transform: scale(1,1);}
        to    {-webkit-transform: scale(1.02,0.95);}
    }
    @-webkit-keyframes huoche_in
    {
        from  {opacity: 0;-webkit-transform: translate(0px,0px);}
        to    {opacity: 1;-webkit-transform: translate(-42px,0px);}
    }
    @-webkit-keyframes word1_in
    {
        from  {opacity: 0;-webkit-transform: scale(0.8);}
        to    {opacity: 1;-webkit-transform: scale(1);}
    }
    @-webkit-keyframes word1_out
    {
        from  {opacity: 1;-webkit-transform: scale(1);}
        to    {opacity: 0;-webkit-transform: scale(.8);}
    }
    @-webkit-keyframes div1h_in
    {
        0%   {-webkit-transform: translate(0px,0px);opacity: 0;}
        50%  {-webkit-transform: translate(-30px,0px);opacity: 1}
        100% {-webkit-transform: translate(-60px,0px);opacity: 1}
    }
    @-webkit-keyframes div1h_out
    {
        from  {-webkit-transform: translate(-60px,0px);opacity: 1}
        to    {-webkit-transform: translate(-90px,0px);opacity: 0}
    }
    @-webkit-keyframes huoche_out
    {
        from  {opacity: 1;-webkit-transform: translate(-42px,0px);}
        to    {opacity: 0;-webkit-transform: translate(-80px,0px);}
    }
    @-webkit-keyframes div1v_in
    {
        0%  {-webkit-transform: translate(0px,0px);opacity: 0}
        50% {-webkit-transform: translate(-10px,0px);opacity: 1}
        100%{-webkit-transform: translate(-20px,0px);opacity: 1}
    }
    @-webkit-keyframes div1v_out
    {
        from  {-webkit-transform: translate(-20px,0px);opacity: 1}
        to    {-webkit-transform: translate(-30px,0px);opacity: 0;}
    }
    @-webkit-keyframes div2v_in
    {
        from  {-webkit-transform: scale(1.1);opacity: 0}
        to    {-webkit-transform: scale(1);opacity: 1}
    }
    @-webkit-keyframes feiji_in
    {
        from  {-webkit-transform: translate(102px,58px) rotate(-17deg) scale(.5);opacity: 1}
        to    {-webkit-transform: translate(0px,0px) rotate(0deg) scale(1);opacity: 1}
    }
    @-webkit-keyframes fadeinyun
    {
        from  {opacity: 1;-webkit-transform: scale(0.6);}
        to    {opacity: 1;-webkit-transform: scale(1);}
    }
    @-webkit-keyframes yun_out
    {
        0%   {opacity: 1;-webkit-transform: scale(1);}
        30%  {opacity: 1;-webkit-transform: scale(1.1);}
        100% {opacity: 0;-webkit-transform: scale(0.6);}
    }
    @-webkit-keyframes feiji_out
    {
        0%  {-webkit-transform: translate(0px,0px) rotate(0deg) scale(1);opacity: 1;}
        100%{-webkit-transform: translate(-150px,-150px) rotate(0deg) scale(1);opacity: 1}
    }
    @-webkit-keyframes word3_in
    {
        0%  {-webkit-transform: scale(.5);opacity: 0}
        70% {-webkit-transform: scale(1.1);opacity: 1}
        100%{-webkit-transform: scale(1);opacity: 1}
    }
    @-webkit-keyframes word3_out
    {
        0%  {-webkit-transform: scale(1);opacity: 1}
        30% {-webkit-transform: scale(1.1);opacity: 1}
        100%{-webkit-transform: scale(.5);opacity: 0}
    }
    @-webkit-keyframes word4_in
    {
        from  {opacity: 0;-webkit-transform: scale(1.2);}
        to    {opacity: 1;-webkit-transform: scale(1);}
    }
    @-webkit-keyframes word4_out
    {
        from  {opacity: 1;-webkit-transform: scale(1);}
        to    {opacity: 0;-webkit-transform: scale(1.2);}
    }
    @-webkit-keyframes zixingche_in
    {
        from  {opacity: 1;-webkit-transform: translate(50px,0px);}
        to    {opacity: 1;-webkit-transform: translate(0px,0px);}
    }
    @-webkit-keyframes zixingche_out
    {
        from  {opacity: 1;-webkit-transform: translate(0px,0px);}
        to    {opacity: 0;-webkit-transform: translate(-30px,0px);}
    }
    @-webkit-keyframes lupai_in
    {
        from  {opacity: 1;-webkit-transform: rotate(-90deg);}
        to    {opacity: 1;-webkit-transform: rotate(0deg);}
    }
    @-webkit-keyframes lupai_out
    {
        from  {opacity: 1;-webkit-transform: rotate(0deg);}
        to    {opacity: 0;-webkit-transform: rotate(-90deg);}
    }
    @-webkit-keyframes chibangmove
    {
        from  {-webkit-transform: scale(1,1);}
        to    {-webkit-transform: scale(0.3,1);}
    }
    @-webkit-keyframes chibangmove1
    {
        from  {-webkit-transform: scale(-1,1);}
        to    {-webkit-transform: scale(-0.3,1);}
    }
    @-webkit-keyframes aixin2
    {
        from  {-webkit-transform: translate(87px,82px) rotate(-41deg) scale(.8);opacity: 0}
        to    {-webkit-transform: translate(60px,51px) rotate(-21deg) scale(.7);opacity: 1}
    }
    @-webkit-keyframes aixin2_out
    {
        from  {-webkit-transform: translate(60px,51px) rotate(-21deg) scale(.7);opacity: 1}
        to    {-webkit-transform: translate(100px,-45px) rotate(1deg) scale(.7);opacity: 1}
    }
    @-webkit-keyframes aixin1
    {
        from  {-webkit-transform: translate(-32px,113px) rotate(40deg) scale(0.7);opacity: 0}
        to    {-webkit-transform: translate(-10px,76px) rotate(32deg) scale(0.8);opacity: 1}
    }
    @-webkit-keyframes aixin1_out
    {
        from  {-webkit-transform: translate(-10px,76px) rotate(32deg) scale(0.8);opacity: 1}
        to    {-webkit-transform: translate(-10px,-44px) rotate(3deg) scale(0.8);opacity: 1}
    }
    @-webkit-keyframes word5_in
    {
        from  {opacity: 0;-webkit-transform: rotate(-90deg);}
        to    {opacity: 1;-webkit-transform: rotate(0deg);}
    }
    @-webkit-keyframes word5_out
    {
        from  {opacity: 1;-webkit-transform: rotate(0deg) scale(1);}
        to    {opacity: 0;-webkit-transform: rotate(90deg) scale(1.3);}
    }
    @-webkit-keyframes div5_in
    {
        from  {-webkit-transform: scale(1.05);opacity: 0}
        to    {-webkit-transform: scale(1);opacity: 1}
    }
    @-webkit-keyframes div5_out
    {
        from  {-webkit-transform: translate(0px,0px) scale(1);opacity: 1}
        to    {-webkit-transform: translate(-30px,-30px) scale(1);opacity: 0}
    }
</style>
<div id='container'>
    <img id='line1' src='{$skinurl}skin/datu/jiang2.png'>
    <img id='line2' src='{$skinurl}skin/datu/jiang2.png'>

    <div id='line3'></div>
    <div id='line4'></div>

    <img id='yuan' src='{$skinurl}skin/datu/jiang.png'>
    <img id='yuan1' src='{$skinurl}skin/datu/jiang1.png'>

    <div id='div1h' style='display:none'>
        <img id='img1h' style='position:absolute'>
        <span id='word1h' class='showwords'></span>
    </div>
    <div id='div1v' style='display:none'>
        <img id='img1v' style='position:absolute'>
        <span id='word1v' class='showwords'></span>
    </div>

    <div id='div2v' style='display:none'>
        <img id='img2v' style='position:absolute'>
        <span id='word2v' class='showwords'></span>
    </div>
    <div id='div2h' style='display:none'>
        <img id='img2h' style='position:absolute'>
        <span id='word2h' class='showwords'></span>
    </div>

    <div id='div3v' style='display:none'>
        <img id='img3v' style='position:absolute'>
        <span id='word3v' class='showwords'></span>
    </div>
    <div id='div3h' style='display:none'>
        <img id='img3h' style='position:absolute'>
        <span id='word3h' class='showwords'></span>
    </div>

    <div id='div4h' style='display:none'>
        <img id='img4h' style='position:absolute'>
        <span id='word4h' class='showwords'></span>
    </div>
    <div id='div4v' style='display:none'>
        <img id='img4v' style='position:absolute'>
        <span id='word4v' class='showwords'></span>
    </div>

    <div id='div5v' style='display:none'>
        <img id='img5v' style='position:absolute'>
        <span id='word5v' class='showwords'></span>
    </div>
    <div id='div5h' style='display:none'>
        <img id='img5h' style='position:absolute'>
        <span id='word5h' class='showwords'></span>
    </div>
    <div id='pagetitle' style='position:absolute;width:178px;height:110px;top:274px;left:166px;font-size:22px;overflow:hidden;color:#fff'>
        <div style='position:absolute;width:178px;height:110px;top:0px;left:0px;overflow:hidden;'>
            <div style='position:absolute;width:178px;height:110px;display:table;overflow:hidden;'>
                <div id='titlecontent' style='width:178px;height:110px;vertical-align:middle;display:table-cell;text-align:center;'></div>
            </div>
        </div>
    </div>

</div>



<script>
    var image_size_width=[];
    var image_size_height=[];
    var image_url_index=0;
    var have_num = 0;
    var error_num = 0;
    var canshow = true;
    var reshow = false;
    var delaytime=5000;
    var timeout0;
    var timeout1;
    var timeout2;
    var timeout3;
    var timeout4;
    var timeout5;
    var timeout6;
    var timeout7;

    var get_pid = function(url){
        var index1 = url.indexOf("?");
        if(index1 != -1)
        {
            url = url.substr(0, index1);
        }
        return url.toString().substr(url.lastIndexOf("/") + 1);
    }

    function id(name)
    {
        return document.getElementById(name);
    }
    function load_images()
    {
        reshow = false;
        image_size_width=[];
        image_size_height=[];
        Onload_imgs_url=[];
        image_url_index=0;
        have_num = 0;
        error_num = 0;
        begin_titletime = new Date();
        begin_titletime = begin_titletime.getTime();
        canshow = true;
        showtitle();

        bl_keepload = 'first';
        step_load();

    }
    //每次执行加载后5张图片
    var bl_keepload = 'first';
    var step_loadnum = 5;
    function step_load()
    {
        var load_num = 0
        //初步加载X张
        if(image_url_index  == 0 && bl_keepload == 'first')
        {
            console.log('loading continue');
            if(slider_images_url.length > step_loadnum)
            {
                load_num = step_loadnum;
                bl_keepload = 'next';
            }
            else
            {
                load_num = slider_images_url.length;
                bl_keepload = 'end';
            }
            for(var i = 0; i< load_num; i++)
            {
                var img=new Image();
                img.index=i;
                img.src=slider_images_url[i];
                img.onload=image_onload;
                img.onerror= image_onerror;
                Onload_imgs_url[i] = 'loading';
            }
        }
        else if(bl_keepload == 'end')
        {
            return;
        }
        else
        {
            // console.log('loading continue');
            if(slider_images_url.length - image_url_index >step_loadnum*2)
            {
                load_num = step_loadnum;
            }
            else
            {
                load_num = slider_images_url.length - image_url_index - step_loadnum;
                bl_keepload = 'end';
            }
            for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
            {
                var img=new Image();
                img.index=i;
                img.src=slider_images_url[i];
                img.onload=image_onload;
                img.onerror= image_onerror;
                Onload_imgs_url[i] = 'loading';
            }
        }
    }
    function image_onerror(event)
    {
        var img = event.target;
        var index = img.index;
        if(index<step_loadnum)
            error_num ++;
        Onload_imgs_url[index] = 'not find';
        console.log(Onload_imgs_url[index]);
        // console.log(have_num + '-' + error_num);
        if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                distitle();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
            }
        }
    }

    function image_onload(event)
    {
        if(reshow == true)
            return;

        var img = event.target;
        var index = img.index;

        if(index<step_loadnum)
        {
            have_num++;
        }
        Onload_imgs_url[index] = img.src;
        image_size_height[index] = img.height;
        image_size_width[index] = img.width;

        console.log(Onload_imgs_url[index]);
        // console.log(have_num + '-' + error_num);

        if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
        {
            reshow = false;
            canshow =false;
            if(have_num == 0)
                return;
            var end_titletime = new Date();
            end_titletime = end_titletime.getTime();
            var dis_titletime = Math.abs(end_titletime-begin_titletime);
            if(dis_titletime>delaytime)
            {
                distitle();
            }
            else
            {
                dis_titletime = delaytime- dis_titletime;
                timeout0 = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
            }

        }
    }
    function id(name)
    {
        return document.getElementById(name);
    }

    function showtitle()
    {
        id('line1').style.webkitAnimation = 'line1_in 1.5s linear both';
        id('line2').style.webkitAnimation = 'line2_in 1.5s linear both';
        id('yuan').style.webkitAnimation = 'yuan_in 0.6s 1s ease-out both';
        id('yuan1').style.webkitAnimation = 'fadein 0.4s 1.4s linear both';
        id('pagetitle').style.webkitAnimation = 'fadein 0.7s 1.6s linear both';
        id('titlecontent').innerHTML = e_title;
    }

    function distitle()
    {
        id('pagetitle').style.webkitAnimation = 'title_out 0.3s linear both';
        id('yuan1').style.webkitAnimation = 'yuan1_out 0.3s linear 0.2s both';
        id('yuan').style.webkitAnimation = 'yuan_out 0.8s ease-out 0.3s both';

        id('line3').style.webkitAnimation = 'line3_out 1s linear 0.5s both';
        id('line4').style.webkitAnimation = 'line4_out 1s linear 0.5s both';

        timeout1 = setTimeout(show1,1000)
    }
    function show1()
    {
        setImage('1');

        id('div1h').style.webkitAnimation = 'div1h_in 4s cubic-bezier(.28,.41,.81,.99) both';
        id('div1v').style.webkitAnimation = 'div1v_in 4s linear both';

        timeout2 = setTimeout(show2,5000)
    }

    function show2()
    {
        setImage('2');


        id('div1h').style.webkitAnimation = 'div1h_out 1s ease-in both';
        id('div1v').style.webkitAnimation = 'div1v_out 1s ease-in both';

        id('div2v').style.webkitAnimation = 'div2v_in 1s 0.2s linear both';
        id('div2h').style.webkitAnimation = 'div2v_in 1s 0.2s linear both';

        timeout3 = setTimeout(show3,5000)
    }

    function show3()
    {
        setImage('3');

        id('div2v').style.webkitAnimation = 'fadeout 1s linear both';
        id('div2h').style.webkitAnimation = 'fadeout 1s linear both';

        id('div3h').style.webkitAnimation = 'fadein 1s 0.4s linear both';
        id('div3v').style.webkitAnimation = 'fadein 1s 0.4s linear both';

        timeout4 = setTimeout(show4,5000)
    }
    function show4()
    {
        setImage('4');

        id('div3h').style.webkitAnimation = 'fadeout 1s linear both';
        id('div3v').style.webkitAnimation = 'fadeout 1s linear both';

        id('div4h').style.webkitAnimation = 'div1h_in 4s cubic-bezier(.28,.41,.81,.99) both';
        id('div4v').style.webkitAnimation = 'div1v_in 4s linear both';

        timeout5 = setTimeout(show5,5000)
    }
    function show5()
    {
        setImage('5');
        id('div5v').style.webkitAnimation = 'div5_in 1s 0.5s ease-out both';
        id('div5h').style.webkitAnimation = 'div5_in 1s 0.5s ease-out both';

        timeout6 = setTimeout(show1_1,5000)
    }
    function show1_1()
    {
        setImage('1');
        id('div5v').style.webkitAnimation = 'div5_out 1s ease-out both';
        id('div5h').style.webkitAnimation = 'div5_out 1s ease-out both';

        id('div1h').style.webkitAnimation = 'div1h_in 4s cubic-bezier(.28,.41,.81,.99) both';
        id('div1v').style.webkitAnimation = 'div1v_in 4s linear both';
        id('div2h').style.webkitAnimation = '';
        id('div3v').style.webkitAnimation = '';
        id('div4v').style.webkitAnimation = '';
        id('div2v').style.webkitAnimation = '';
        id('div3h').style.webkitAnimation = '';
        id('div4h').style.webkitAnimation = '';

        timeout7 = setTimeout(show2,5000)
    }
    var divwidth = {'1h':550,'1v':490,'2h':500,'2v':500,'3h':500,'3v':500,'4h':550,'4v':490,'5h':530,'5v':530};
    var divheight = {'1h':400,'1v':750,'2h':350,'2v':780,'3h':350,'3v':780,'4h':400,'4v':750,'5h':353,'5v':800};

    function insertEnter(str,n){
        var len = str.length;
        var strTemp = '';
        if(len > n){
            strTemp = str.substring(0,n);
            str = str.substring(n,len);
            return strTemp+'\n'+str;
        }else{
            return str;
        }
    }

    function setImage(idname)
    {
        if(reshow == true)
            return;

        while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
        {
            if(image_url_index % step_loadnum == 0)
            {
                step_load();
            }
            console.log(Onload_imgs_url[image_url_index]);
            image_url_index++;
            if(image_url_index == Onload_imgs_url.length)
                image_url_index = 0;
        }

        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        console.log('setimg:' + Onload_imgs_url[image_url_index]);

        var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
        var div;
        var div1;
        var divname;
        var word;

        if(img_bili > 1)
        {
            divname = idname + 'h';
            div = id('div'+idname+'h');
            div1 = id('div'+idname+'v');
            word = id('word' + divname);
            word.style.top = "85%";

        }
        else   //竖
        {
            divname = idname + 'v';
            div = id('div'+idname+'v');
            div1 = id('div'+idname+'h');
            word = id('word' + divname);
            word.style.top = "75%";

        }

        div.style.display = 'block';
        div1.style.display = 'none';


        var height = divheight[divname];
        var width = divwidth[divname];

        // var word = id('word' + divname);
        var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
        if(word_string != undefined)
        {
            word_string = word_string.replace(/[\n]/ig,'');

            var word_length = word_string.length;
            if(word_length <= 4)
            {
                word.style.fontSize = "33px";
            }else {
                word.style.fontSize = "30px";
                if(word_length > 10)
                    word_string = insertEnter(word_string, 5);
            }
            word.innerText = word_string;
        }
        else
        {
            word.innerText = "";
        }

        var img = id('img'+divname);
        img.src = Onload_imgs_url[image_url_index];
        console.log(img.src);

        if(img_bili > (width/height))
        {
            img.style.top = '0px';
            img.style.height = height + 'px';
            img.style.width = height*img_bili + 'px';
            img.style.left = -((height*img_bili-width)/2)+'px';
        }
        else
        {
            img.style.left = '0px';
            img.style.width = width+'px';
            img.style.height = width/img_bili + 'px';
            img.style.top = -((width/img_bili-height)/2) + 'px';
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;

        console.log(image_url_index);
        // console.log(width,height,img.style.left,img.style.top,img.width,img.height);
    }
    call_me(load_images);
    function reload_scene()
    {
        clearnode();
        reshow = true;
        setTimeout(load_images,100);
    }

    function clearnode()
    {
        id('line1').style.webkitAnimation = '';
        id('line2').style.webkitAnimation = '';
        id('line3').style.webkitAnimation = '';
        id('line4').style.webkitAnimation = '';
        id('yuan').style.webkitAnimation = '';
        id('yuan1').style.webkitAnimation = '';
        id('pagetitle').style.webkitAnimation = '';

        id('div1h').style.webkitAnimation = '';
        id('div1v').style.webkitAnimation = '';
        id('div2h').style.webkitAnimation = '';
        id('div2v').style.webkitAnimation = '';
        id('div3h').style.webkitAnimation = '';
        id('div3v').style.webkitAnimation = '';
        id('div4h').style.webkitAnimation = '';
        id('div4v').style.webkitAnimation = '';
        id('div5h').style.webkitAnimation = '';
        id('div5v').style.webkitAnimation = '';
        id('div1h').style.display = 'none';
        id('div1v').style.display = 'none';
        id('div2h').style.display = 'none';
        id('div2v').style.display = 'none';
        id('div3h').style.display = 'none';
        id('div3v').style.display = 'none';
        id('div4h').style.display = 'none';
        id('div4v').style.display = 'none';
        id('div5h').style.display = 'none';
        id('div5v').style.display = 'none';

        clearTimeout(timeout0);
        clearTimeout(timeout1);
        clearTimeout(timeout2);
        clearTimeout(timeout3);
        clearTimeout(timeout4);
        clearTimeout(timeout5);
        clearTimeout(timeout6);
        clearTimeout(timeout7);
    }
</script>